<template>
  <div>

    <el-card shadow="always" :body-style="{ padding: '20px' }" class="margin_30">
      <div slot="header">
        <span>新增文章</span>
      </div>
      <el-form :model="formData" :rules="rules" size="mini" label-width="140px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="作者" prop="author">
              <el-input v-model="formData.author" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标题" prop="title">
              <el-input v-model="formData.title" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否显示">
              <template>
                <el-switch
                  v-model="formData.isShow"
                  active-color="#409eff"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="摘要">
              <el-input
                v-model="formData.summary "
                type="textarea"
                rows="2"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="13">
            <el-form-item label="封面图片">
              <el-upload
                class="upload-demo"
                action="http://leju.bufan.cloud/lejuAdmin/material/uploadFileOss"
                :on-success="getUploadImg"
                :headers="setToken"
                :show-file-list="false"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

              </el-upload>
              <img style="width:100px" :src="formData.coverImg" alt="">
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="切换富文本类型">
              <el-radio v-model="radio" label="1">富文本</el-radio>
              <el-radio v-model="radio" label="2">markdown</el-radio>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <tinymce v-if="radio==1" v-model="formData.content1" :height="300" />
            <mavon-editor v-else ref="md" v-model="formData.content1" @change="getHtml" @imgAdd="imgAdd" />
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

    </el-card>

  </div>
</template>

<script>
import { getToken } from '@/utils/myAuth'
import Tinymce from '@/components/Tinymce/index.vue'
import { uploadFileOss, addArticle, productArticle, updateArticle } from '@/api/content/operation/index'
export default {
  components: {
    Tinymce
  },
  data() {
    return {
      setToken: {
        token: getToken()
      },
      radio: '1',
      formData: {
        'author': '',
        'collectCount': '',
        'content1': '',
        'content2': '',
        'coverImg': '',
        'createTime': '',
        'editorType': '',
        'id': '',
        'isShow': true,
        'modifyTime': '',
        'summary': '',
        'title': '',
        'viewCount': 0,
        'zanCount': 0
      },
      rules: {
        author: [
          { required: true, message: '请输入作者名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请选择文章标题', trigger: 'blur' }
        ]
      }
    }
  },

  mounted() {

  },

  created() {
    if (this.$route.query.id) {
      productArticle(this.$route.query.id).then(res => {
        console.log(res)
        this.formData = res.data.productArticle
      })
    }
  },

  methods: {
    getHtml(value, render) {
      console.log(value)
      console.log(render)
      this.content2 = render
    },
    imgAdd(pos, $file) {
      var formdata = new FormData()
      formdata.append('file', $file)
      uploadFileOss(formdata).then(res => {
        this.$refs.md.$img2Url(pos, res.data.fileUrl)
      })
      // axios({
      //   url: 'server url',
      //   method: 'post',
      //   data: formdata,
      //   headers: { 'Content-Type': 'multipart/form-data' }
      // }).then((url) => {
      //   // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
      //   /**
      //          * $vm 指为mavonEditor实例，可以通过如下两种方式获取
      //          * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
      //          * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
      //          */
      //   $vm.$img2Url(pos, url)
      // })
    },
    onSubmit() {
      if (this.formData.id) {
        this.formData.content2 = this.formData.content2 ? this.formData.content2 : this.formData.content1
        this.formData.isShow = this.formData.isShow ? 1 : 0
        updateArticle(this.formData).then(res => {
          console.log(res)
        })
      } else {
        this.formData.content2 = this.formData.content2 ? this.formData.content2 : this.formData.content1
        this.formData.isShow = this.formData.isShow ? 1 : 0
        addArticle(this.formData).then(res => {
          console.log(res)
        })
      }
      this.$router.push('/content/article')
    },
    getUploadImg(response) {
      this.formData.coverImg = response.data.fileUrl
    }
  }
}
</script>

<style scoped>

</style>
